<template>
	<view @tap="handleConfirm(data.routeId)">
		<uni-card padding="0" margin="0 auto 20rpx" spacing="0" class="armed-card">
			<template v-slot:cover>
				<view class="custom-cover">
					<image class="cover-image" :src="data.coverUrl" />
					<view class="cover-content">
						<view class="uni-subtitle">
							<view class="subtitle-item">
								<image src="@/asstes/images/armed/icon-2.png" alt="" />
								<view>{{ data.campTypeText }}</view>
							</view>
							<view class="subtitle-item">
								<image src="@/asstes/images/armed/icon-1.png" alt="" />
								<view>{{ data.routeTypeText }}</view>
							</view>
							<view class="subtitle-item">
								<image src="@/asstes/images/armed/icon-3.png" alt="" />
								<view>{{ data.ageRangeDesc }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="info-panel">
					<view class="info-left">
						<view class="info-content">{{ data.title }}</view>
						<view class="info-tags">{{ data.routeTags?.join('|') }}</view>
					</view>
					<view class="info-right">
						<view class="price-new">￥{{ data.retailPrice }}</view>
						<view class="price-old">￥{{ data.channelPrice }}</view>
						<view class="btn-panel">立即报名</view>
					</view>
				</view>
			</template>
		</uni-card>
	</view>
</template>

<script setup>
import { defineProps } from 'vue';
const props = defineProps({
	data: { type: Object, default: () => ({}) }
});

function handleConfirm(routeId) {
	//打开详情页面
	uni.navigateTo({
		url: '/pages/home/activityDetail?routeId=' + routeId
	});
}
</script>

<style scoped lang="scss">
.armed-card {
	height: 500rpx;
	width: 96%;
	border-radius: 40rpx;

	.custom-cover {
		position: relative;
		height: 320rpx;
		.cover-image {
			height: 100%;
			width: 100%;
		}
		.cover-content {
			position: absolute;
			bottom: 0;
			width: 100%;
			background: rgba(0, 0, 0, 0.5);
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			.uni-subtitle {
				padding-left: 10rpx;
				display: flex;
				flex-direction: row;
				width: 100%;
				color: #fff;
				font-size: 1rem;
				line-height: 16rpx;
				.subtitle-item {
					display: flex;
					align-items: center;
					font-size: 23.08rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 31.65rpx;
					color: rgba(255, 255, 255, 1);
					margin-right: 20rpx;
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
	.info-panel {
		flex: 1;
		display: flex;
		.info-left {
			padding: 12rpx 19rpx 35rpx;
			flex: 1;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			flex-direction: column;
			.info-content {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				/* 设置宽度和高度 */
				height: 70rpx;
				font-size: 26.92rpx;
				font-weight: 400;
				letter-spacing: 0;
				line-height: 36.94rpx;
				color: rgba(0, 0, 0, 1);
			}
			.info-tags {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				height: 30rpx;
				font-size: 25.08rpx;
				font-weight: 400;
				letter-spacing: 0;
				line-height: 31.65rpx;
				color: rgba(67, 207, 124, 1);
			}
		}
		.info-right {
			width: 140rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			padding: 7rpx 20rpx 25rpx;
			.price-new {
				font-size: 38.46rpx;
				font-weight: 700;
				letter-spacing: 0rpx;
				line-height: 52.77rpx;
				color: rgba(67, 207, 124, 1);
			}
			.price-old {
				font-size: 26.92rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 36.94rpx;
				color: rgba(166, 166, 166, 1);
				text-decoration: line-through;
			}
			.btn-panel {
				opacity: 1;
				padding: 5rpx 10rpx;
				margin-top: 10rpx;
				border-radius: 19.23rpx;
				background: rgba(67, 207, 124, 1);
				font-size: 23.08rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 35.65rpx;
				color: rgba(255, 255, 255, 1);
			}
		}
	}
}
</style>
